<template>
	<view class="pageContainer">
		<view class="operation-mode">
			<view class="operation-box">
				<view class="operation-box-icon" style="width: 16px;">
					<image src="../../../../../static/examinationImg/detail/date.png"></image>
				</view>
				<view class="operation-box-text">
					<uni-countdown :show-day="false" :minute="10" @timeup="timeup" />
				</view>
			</view>
			<view class="operation-box">
				<view class="operation-box-icon">
					<image src="../../../../../static/examinationImg/detail/questionsNumber.png"></image>
				</view>
				<view class="operation-box-text"><text
						style="color: #0887FE;">{{subjectIndex+1}}</text>/{{subjectList.length}}</view>
			</view>
			<view class="operation-box">
				<view class="operation-box-icon">
					<image src="../../../../../static/examinationImg/detail/questionsSubmit.png"></image>
				</view>
				<view class="operation-box-text" @click="submitExam">提交试卷</view>
			</view>
		</view>
		<view class="swiper-mode">
			<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange">
				<swiper-item v-for="(subject,index) in subjectList">
					<scroll-view scroll-y="true" class="swiper-content">
						<view class="swiper-content-item">
							<view class="tag-mode">
								<uni-tag :text="questionType[subject.type].text"
									custom-style="background-color: #EBF1FF; border-color:#EBF1FF; color: #3C6EC8;">
								</uni-tag>
								<text>{{subject.score}}分</text>
							</view>
							<view class="questionTitle-mode">
								{{subject.title}}
							</view>
							<view class="answer-mode">
								<template v-if="subject.type===0">
									<view class="answer-box" v-for="(option,indexT) in subject.optionList" :key="indexT"
										@click="radioboxChange(option,index,indexT)">
										<view class="radio-box"
											:class="option.id == subject.userAnswer?'radio-box-in':''">{{option.id}}
										</view>
										<view class="text-box">{{option.content}}</view>
									</view>
								</template>
								<template v-if="subject.type===1">
									<view class="answer-box" v-for="(option,indexT) in subject.optionList" :key="indexT"
										@click="radioboxChange(option,index,indexT)">
										<view class="radio-box" style="border-radius: 4px;"
											:class="subject.userAnswer.includes(option.id)?'radio-box-in':''">
											{{option.id}}
										</view>
										<view class="text-box">{{option.content}}</view>
									</view>
								</template>
								<template v-if="subject.type===2">
									<view class="answer-box" v-for="(option,indexT) in subject.optionList" :key="indexT"
										@click="radioboxChange(option,index,indexT)">
										<view class="radio-box"
											:class="option.id == subject.userAnswer?'radio-box-in':''">
											<uni-icons :type="option.id=='Y'?'checkmarkempty':'closeempty'"
												:color="option.id == subject.userAnswer?'#ffffff':'#898EA2'"
												size="18"></uni-icons>
										</view>
										<view class="text-box">{{option.content}}</view>
									</view>
								</template>
								<template v-if="subject.type===3">
									<view class="speech-mode">
										<view class="speech-box" @click="startLuyin(index)">
											<uni-icons type="mic-filled" size="16" color="#0887FE"></uni-icons>
											<text style="margin-left: 4px;">语音输入</text>
										</view>
									</view>
									<view class="answer-text-box">
										<view class="answer-textarea">
											<textarea v-model="subject.userAnswer" placeholder="请输入内容"
												@blur="bindTextAreaBlur" auto-height :maxlength='100' />
										</view>
										<view class="text-num">{{subject.userAnswer.length}}/100
										</view>
									</view>
								</template>
								<template v-if="subject.type===4">
									<view class="speech-mode">
										<view class="speech-box" @click="startLuyin(index)">
											<uni-icons type="mic-filled" size="16" color="#0887FE"></uni-icons>
											<text style="margin-left: 4px;">语音输入</text>
										</view>
									</view>
									<view class="answer-text-box">
										<view class="answer-textareaT">
											<textarea v-model="subject.userAnswer" placeholder="请输入内容"
												@blur="bindTextAreaBlur" auto-height :maxlength='500' />
										</view>
										<view class="text-num">{{subject.userAnswer.length}}/500
										</view>
									</view>
								</template>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			</swiper-mode>
		</view>
		<view class="bottom-mode">
			<view class="operation-box" @click="toggle('bottom')">
				<view class="operation-box-icon">
					<image src="../../../../../static/examinationImg/detail/answerSheet.png"></image>
				</view>
				<view class="operation-box-text">答题卡</view>
			</view>
			<view class="bottom-box">
				<button class="button-box" style="margin-right: 12px;" type="primary" plain="true"
					v-if="subjectList.length!=1" :disabled="subjectIndex==0"
					@click="questionSelectOp('previous')">上一题</button>
				<button class="button-box" type="primary" plain="true"
					v-if="(subjectIndex != subjectList.length - 1)&&(subjectList.length!=1)"
					@click="questionSelectOp('next')">下一题</button>
				<button class="button-box" type="primary"
					v-if="(subjectIndex == subjectList.length - 1)||subjectList.length==1"
					@click="submitExam">提交试卷</button>
			</view>
		</view>
		<uni-popup ref="answerSheetpopup" :is-mask-click="false">
			<view class="popup-mode">
				<view class="header-mode">
					<text style="width: 24px;"></text>
					<view class="header-box">
						<text style="font-size:16px;color: #000;font-weight: 600;">答题卡</text>
						<!-- <text>（题量:100；满分:100；时间:120分钟）</text> -->
					</view>
					<uni-icons type="closeempty" size="24" @click="cancel()"></uni-icons>
				</view>
				<scroll-view class="popup-content" scroll-y="true">
					<view class="popup-content-item">
						<view class="popup-content-box" v-for="(questionItem,questionIndex) in questionType"
							:key="questionIndex" v-if="questionItem.questionList.length>0">
							<view class="popup-content-box-title">{{questionItem.text}}</view>
							<view class="popup-content-box-main">
								<view class="popup-radio-mode" v-for="(itemH,indexH) in questionItem.questionList"
									:key="indexH">
									<view class="popup-radio-box"
										:class="[itemH.userAnswer.length===0?'':'popup-radio-box-in']"
										@click="appointedSubject(itemH.currentIndex)">
										{{itemH.currentIndex+1}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-bottom">
					<view class="popup-bottom-box">
						已答题：{{answeredNum}}/{{subjectList.length}}
					</view>
					<view class="popup-bottom-box">
						<button class="popup-bottom-button" type="primary" @click="submitExam">提交试卷</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确认" title="温馨提示" @confirm="dialogConfirm"
				@close="dialogClose">
				<view>{{alertText}}</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="dateDialog" type="dialog" :mask-click="false" :is-mask-click='false'>
			<uni-popup-dialog type="warn" confirmText="确认" title="温馨提示" :showClose="false" @confirm="dialogConfirm">
				<view>已到限定时间，系统为您自动交卷</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	//录音
	const recorderManager = uni.getRecorderManager();
	//播放录音
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				currentType: 0, //当前题型
				subjectIndex: 0, //跳转索引
				cursorIndex: 0, //光标位置
				alertText: '确认要交卷吗?',
				subjectList: [{
						'id': '216378162783',
						"title": "电流分有？",
						"type": 0,
						'typeName': '单选题',
						'score': 3,
						"optionList": [{
							"id": "A",
							"content": "直流"
						}, {
							"id": "B",
							"content": "交流"
						}, {
							"id": "C",
							"content": "直流和交流"
						}],
						"userAnswer": "",
					},
					{
						'id': '34345345345345',
						"title": "酸菜鱼的味道？",
						"type": 1,
						'typeName': '多选题',
						'score': 6,
						"optionList": [{
							"id": "A",
							"content": "咸味",
							"cheak": false
						}, {
							"id": "B",
							"content": "辣味",
							"cheak": false
						}, {
							"id": "C",
							"content": "甜味",
							"cheak": false
						}, {
							"id": "D",
							"content": "酸味",
							"cheak": false
						}],
						"userAnswer": [],
					}, {
						'id': '34345345345345',
						"title": "水是液体？",
						'typeName': '判断题',
						"type": 2,
						'score': 3,
						"optionList": [{
							"id": "Y",
							"content": "正确"
						}, {
							"id": "N",
							"content": "错误"
						}],
						"userAnswer": "",
					},
					{
						'id': '34345345345345',
						"title": "床前（____）光，疑是地上霜。",
						"type": 3,
						'typeName': '填空题',
						'score': 5,
						"userAnswer": "",
					},
					{
						'id': '34345345345345',
						"title": "什么美国要限制华为？",
						"type": 4,
						'typeName': '问答题',
						'score': 8,
						"userAnswer": "",
					},
				],
				questionType: [{
						type: 0,
						text: "单选题",
						questionList: []
					},
					{
						type: 1,
						text: "多选题",
						questionList: []
					},
					{
						type: 2,
						text: "判断题",
						questionList: []
					},
					{
						type: 3,
						text: "填空题",
						questionList: []
					},
					{
						type: 4,
						text: "问答题",
						questionList: []
					}
				],
				//已答题目
				answeredNum: 0

			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: "2025年度职业人员综合测评考试A卷"
			})
		},
		onLoad() {},
		methods: {
			bindTextAreaBlur: function(e) {
				this.cursorIndex = e.detail.cursor;
			},
			//语音输入
			startLuyin(index) {
				let _this = this;
				console.log('语音输入')
				let options = {};
				options.engine = 'baidu'; //使用百度语音
				options.punctuation = false; // 是否需要标点符号 
				options.timeout = 10 * 1000; //超时时间
				plus.speech.startRecognize(options, function(s) {
					console.log(s) //识别的结果
					_this.subjectList[index].userAnswer = _this.insertStr(_this.subjectList[index].userAnswer,
						_this.cursorIndex, s);
					plus.speech.stopRecognize(); // 关闭
				});
			},
			//对字符串指定位置插入字符串
			insertStr(soure, start, newStr) {
				return soure.slice(0, start) + newStr + soure.slice(start);
			},
			//题型分类
			questionClassificationOp() {
				this.answeredNum = 0;
				this.questionType.forEach(e => {
					e.questionList = []
				})
				this.subjectList.forEach((e, i) => {
					this.questionType.forEach(e2 => {
						if (e.type === e2.type) {
							e2.questionList.push({
								id: e.id,
								userAnswer: e.userAnswer,
								currentIndex: i
							})
						}
					})
					if (e.userAnswer.length !== 0) {
						this.answeredNum += 1;
					}
				})
				console.log(this.questionType);
			},
			//考试时间停止
			timeup() {
				this.$refs.dateDialog.open();
			},
			//提交试卷
			submitExam() {
				this.questionClassificationOp();
				if (this.answeredNum < this.subjectList.length) {
					let num = this.subjectList.length - this.answeredNum;
					this.alertText = `您还有${num}道题目未完成，确认要交卷吗?`;
				} else if (this.answeredNum == this.subjectList.length) {
					this.alertText = '全部题目已完成，确认要交卷吗';
				}
				this.$refs.alertDialog.open();
			},
			//确认交卷
			dialogConfirm() {
				uni.redirectTo({
					url: `/pages/examinationManagement/detail/testPaper/report/index`
				});
			},
			//单选选中
			radioboxChange(e, index, indexT) {
				if ([0, 2].includes(this.subjectList[index].type)) {
					this.subjectList[index].userAnswer = e.id;
					if (this.subjectIndex < this.subjectList.length - 1) {
						this.subjectIndex += 1;
					}
				} else if (this.subjectList[index].type === 1) {
					this.subjectList[index].optionList[indexT].cheak = !this.subjectList[index].optionList[indexT].cheak;
					let filteredArray = this.subjectList[index].optionList.map(e2 => {
						if (e2.cheak) {
							return e2.id;
						}
					});
					// 使用filter方法过滤掉undefined
					this.subjectList[index].userAnswer = filteredArray.filter(e3 => e3 !== undefined);
				};

			},
			//答题卡
			toggle(type) {
				this.questionClassificationOp();
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.answerSheetpopup.open(type)
			},
			//题卡指定
			appointedSubject(e) {
				this.subjectIndex = e;
				this.$refs.answerSheetpopup.close()
			},
			//关闭窗口
			cancel() {
				this.$refs.answerSheetpopup.close()
			},
			//题目选择 previous上一题 next下一题
			questionSelectOp(type) {
				if (type == 'previous') {
					this.subjectIndex -= 1;
				} else if (type == 'next') {
					this.subjectIndex += 1;
				}

			},
			//滑动事件
			SwiperChange(e) {
				let index = e.target.current;
				if (index != undefined) {
					this.subjectIndex = index;
					this.currentType = this.subjectList[index].type;
				}
			},
			//跳转
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageContainer {
		width: 100vw;
		height: 100vh;
	}

	.operation-mode {
		width: 100%;
		height: 42px;
		background-color: #ffffff;
		padding: 0 18px;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		display: flex;
		margin-bottom: 10px;

	}

	.operation-box {
		align-items: center;
		display: flex;

		.operation-box-icon {
			width: 14px;
			height: 16px;
			margin-right: 8px;

			image {
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
			}
		}

		.operation-box-text {
			height: 16px;
			font-size: 14px;
			color: #333333;
			align-items: center;
			display: flex;

			::v-deep .uni-countdown {
				height: 100%;
			}
		}
	}

	.swiper-mode {
		width: 100%;
		height: calc(100% - 108px);
		background-color: #FFFFFF;

		.swiper-box {
			width: 100%;
			height: 100%;

			.swiper-content {
				width: 100%;
				height: 100%;

				.swiper-content-item {
					width: 100%;
					padding: 14px 14px 30px;
					box-sizing: border-box;
				}
			}
		}
	}

	.tag-mode {
		width: 100%;
		height: 20px;
		font-size: 13px;
		color: #6B6F75;
		align-items: center;
		justify-content: space-between;
		display: flex;
		margin-bottom: 14px;
	}

	.questionTitle-mode {
		width: 100%;
		line-height: 26px;
		font-size: 15px;
		color: #000000;
	}

	.answer-mode {
		width: 100%;
		margin-top: 25px;

		.answer-box {
			width: 100%;
			display: flex;
			margin-bottom: 20px;

			.radio-box {
				width: 36px;
				height: 36px;
				font-size: 15px;
				font-weight: bold;
				color: #898EA2;
				border-radius: 100px;
				border: 1.5px solid #F0F1F5;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				display: flex;
				margin-right: 18px;
			}

			.radio-box-in {
				color: #ffffff;
				background-color: #0080F8;
				border: 1.5px solid #0080F8;
			}

			.text-box {
				width: calc(100% - 54px);
				line-height: 26px;
				font-size: 15px;
				color: #000000;
				align-items: center;
				display: flex;
			}
		}

		//文本
		//语音输入
		.speech-mode {
			width: 100%;
			align-items: center;
			justify-content: flex-end;
			display: flex;
			margin-bottom: 6px;

			.speech-box {
				height: 24px;
				font-size: 11px;
				color: #0887FE;
				border-radius: 2px;
				background-color: #F2F9FF;
				padding: 6px;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				display: flex;
			}
		}

		//文本输入
		.answer-text-box {
			width: 100%;
			padding: 6px 6px 0;
			border: 1px solid #E6E6E6;
			box-sizing: border-box;

			.answer-textarea {
				width: 100%;
				padding-left: 4px;

				::v-deep {
					uni-textarea {
						width: 100%;
						line-height: 22px;
						font-size: 14px;
						min-height: 60px;
					}
				}
			}

			.answer-textareaT {
				width: 100%;
				padding-left: 4px;

				::v-deep {
					uni-textarea {
						width: 100%;
						line-height: 22px;
						font-size: 14px;
						min-height: 80px;
					}
				}
			}

			.text-num {
				font-size: 12px;
				color: #9EA1A3;
				text-align: end;
				padding: 6px 0;
				box-sizing: border-box;
			}

			::v-deep .uni-easyinput__content-textarea {
				padding-bottom: 16px;
			}
		}
	}

	.bottom-mode {
		width: 100%;
		height: 56px;
		padding: 0 20px;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1px solid #E6E6E6;
		align-items: center;
		justify-content: space-between;
		display: flex;

		.bottom-box {
			align-items: center;
			display: flex;

			.button-box {
				width: 94px;
				height: 36px;
				font-size: 15px;
				border-radius: 100px;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				display: flex;
			}
		}
	}

	/* 筛选弹出层 */
	.popup-mode {
		width: 100%;
		height: 60vh;
		background-color: #FFFFFF;
		border-radius: 12px 12px 0 0;

		.header-mode {
			width: 100%;
			height: 50px;
			border-radius: 12px 12px 0 0;
			border-bottom: 1px solid #E6E6E6;
			padding: 0 16px;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;
			display: flex;

			.header-box {
				font-size: 13px;
				color: #6B6F75;
				align-items: center;
				display: flex;
			}
		}

		.popup-content {
			width: 100%;
			height: calc(100% - 106px);

			.popup-content-item {
				width: 100%;
				padding: 10px 16px;
				box-sizing: border-box;

				.popup-content-box {
					width: 100%;
					margin-bottom: 16px;

					.popup-content-box-title {
						width: 100%;
						font-size: 15px;
						color: #8e8e8f;
						margin-bottom: 14px;
					}

					.popup-content-box-main {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.popup-radio-mode {
							width: calc(100%/6);

							.popup-radio-box {
								width: 36px;
								height: 36px;
								font-size: 14px;
								font-weight: 500;
								color: #000000;
								border-radius: 100px;
								background-color: #f4f5f6;
								box-sizing: border-box;
								align-items: center;
								justify-content: center;
								display: flex;
								margin: 10px;
							}

							.popup-radio-box-in {
								color: #ffffff;
								background-color: #0080F8;
								border: 1.5px solid #0080F8;
							}
						}
					}
				}

			}
		}

		.popup-bottom {
			width: 100%;
			height: 56px;
			border-top: 1px solid #E6E6E6;
			padding: 0 16px;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;
			display: flex;

			.popup-bottom-box {
				font-size: 13px;
				color: #666666;

				.popup-bottom-button {
					width: 142px;
					height: 36px;
					font-size: 14px;
					color: #FFFFFF;
					border-radius: 100px;
					align-items: center;
					justify-content: center;
					display: flex;
				}
			}
		}
	}
</style>